<template>
  <!-- 表格开始 -->
  <jmash-table
    class="table-top"
    ref="multipleTableRef"
    row-key="id"
    :list-loading="listLoading"
    :data="tableData"
    :table-label="tableLabel"
    :is-selection="false"
  >
    <template #time="scope">
      <span>{{
        format(new Date(scope.data.row.time), "yyyy-MM-dd HH:mm:ss")
      }}</span>
    </template>
    <template #userId="scope">
      <span>{{ rbacApi.userInfo(scope.data.row.userId).nickName }}</span>
    </template>
    <template #type="scope">
      <span>{{ Dict.commentType.getValue(scope.data.row.type) }}</span>
    </template>
    <template #fullMessage="scope">
      <span style="color: red">{{ scope.data.row.fullMessage }}</span>
    </template>
  </jmash-table>
</template>
<script setup lang="ts">
import { type Ref, ref, onUpdated } from "vue";
import { type TableColumn, useTableHooks } from "jmash-core";
import { Dict } from "@/api/flow/dict";
import { format } from "date-fns";
import { rbacApi } from "jmash-rbac";

import { useI18n } from "vue-i18n";
const { t } = useI18n();

import type { FlowHiCommentReq } from "@/api/flow/comment/types";

import { commentApi } from "@/api/flow/comment/index";

const props = defineProps({
  procInstId: {
    type: String,
    default: "",
  },
});
const queryParams = ref<FlowHiCommentReq>({});
queryParams.value.procInstId = props.procInstId;

const { tableHooks, multipleTableRef, listLoading, tableData } = useTableHooks(
  t,
  commentApi,
  queryParams,
);

let tableLabel: Ref<TableColumn[]> = ref([
  {
    label: "hicomment.no",
    type: "index",
    width: "60",
    isColumn: true,
  },
  {
    label: "hicomment.name",
    prop: "taskName",
    width: "200",
    isColumn: true,
  },
  {
    label: "hicomment.time",
    prop: "time",
    width: "180",
    slotName: "time",
    columnType: "slot",
    sortable: true,
    isColumn: true,
  },
  {
    label: "hicomment.userId",
    prop: "userId",
    width: "150",
    slotName: "userId",
    columnType: "slot",
    sortable: true,
    isColumn: true,
  },
  {
    label: "hicomment.type",
    prop: "type",
    width: "160",
    slotName: "type",
    columnType: "slot",
    isColumn: true,
  },
  {
    label: "hicomment.fullMessage",
    prop: "fullMessage",
    isColumn: true,
    slotName: "fullMessage",
    columnType: "slot",
  },
]);

if (props.procInstId && props.procInstId !== "") {
  //查询数据.
  tableHooks.getList();
}

//变更检测.
onUpdated(() => {
  if (queryParams.value.procInstId !== props.procInstId) {
    queryParams.value.procInstId = props.procInstId;
    // 执行相应逻辑
    if (props.procInstId && props.procInstId !== "") {
      //查询数据.
      tableHooks.getList();
    }
  }
});
</script>
